<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    :title="statusLabel"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <table class="table table-bordered table-sm">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td class="bg-light">档案编号</td>
          <td>{{ formData.archives_no }}</td>
          <td class="bg-light">档案柜号</td>
          <td>{{ formData.cabinet_no }}</td>
        </tr>
        <tr>
          <td class="bg-light">档案名称</td>
          <td>{{ formData.customer_name }}档案</td>
          <td class="bg-light">附件数量</td>
          <td>{{ formData.attachment_count }}</td>
        </tr>
        <tr>
          <td>{{ personLabel }}</td>
          <td class="input-td">
            <select-staff
              v-model="borrowPerson"
              placeholder="请选择"
              class="w-100"
              @select="handleStaffChange"
            ></select-staff>
          </td>
          <td>{{ timeLabel }}</td>
          <td class="input-td">
            <el-date-picker
              class="w-100"
              v-model="form.latest_lend_time"
              type="date"
              placeholder="请选择"
              value-format="yyyy-MM-dd"
              :clearable="false"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>{{ desLabel }}</td>
          <td colspan="3" class="input-td">
            <el-input
              v-model="form.latest_lend_des"
              type="textarea"
              placeholder="请填写"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="text-center">
      <el-button type="primary" class="btn-long" :loading="loading" @click="handleFinish">
        完成登记
      </el-button>
      <el-button class="btn-long" :disabled="loading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'

import SelectStaff from '@/components/select/SelectStaff'

export default {
  components: {
    SelectStaff,
  },
  props: {
    visible: Boolean,
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        latest_lend_person: '',
        latest_lend_time: '',
        latest_lend_des: '',
        lend_status: 0,
      },
      borrowPerson: '',
      loading: false,
      tableName: 'project_archives',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
    }
  },
  computed: {
    ...mapGetters(['user']),
    archiveId() {
      return this.formData.project_archives_id
    },
    lendStatus() {
      return this.formData.lend_status || 0
    },
    canBorrow() {
      return this.lendStatus === 0
    },
    statusLabel() {
      return this.canBorrow ? '借出登记' : '归还登记'
    },
    personLabel() {
      return this.canBorrow ? '借出人' : '归还人'
    },
    timeLabel() {
      return this.canBorrow ? '借出时间' : '归还时间'
    },
    desLabel() {
      return this.canBorrow ? '借出说明' : '归还说明'
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.init()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.reset()
      this.$emit('update:visible', false)
    },

    init() {
      // 提交的状态
      this.form.lend_status = this.canBorrow ? 1 : 0
    },

    reset() {
      this.borrowPerson = ''
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
    },

    handleStaffChange(val) {
      this.form.latest_lend_person = val.realName
    },

    handleFinish() {
      const msg = this.validate()
      if (msg) {
        return this.$message.error(msg)
      }

      this.loading = true
      this.$api
        .updateData(this.$serviceName, this.tableName, this.archiveId, this.form)
        .then(res => {
          this.addHistory()
          this.beforeClose()
          this.$emit('success', res)
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 验证
    validate() {
      const rules = {
        latest_lend_person: `请选择${this.personLabel}`,
        latest_lend_time: `请选择${this.timeLabel}`,
      }
      const keys = Object.keys(rules)
      for (const key of keys) {
        if (!this.form[key]) {
          return rules[key]
        }
      }
    },

    // 记录
    addHistory() {
      const { formData, form, canBorrow, archiveId } = this
      return this.$api.addData(this.$serviceName, 'lend_register', {
        lend_des: form.latest_lend_des,
        lend_person: form.latest_lend_person,
        lend_time: form.latest_lend_time,
        lend_type: canBorrow ? 1 : 2,
        register_id: archiveId,
        submit_person_name: this.user.realName,
        register_no: formData.archives_no,
        register_cabinet_no: formData.cabinet_no,
        register_attachment_count: formData.attachment_count,
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
